<template>
  <div class="bgc_grey" id="FAQ"  >
    <div>
      <div class="FAQ_category">
        <el-menu  :collapse="false"  :unique-opened="true" :default-active="$route.path" class="FAQ_menu_pc" >
          <template v-for="(item) in list">
            <el-submenu  :key="item.label" :index="item.link"  v-if="item.childlist && item.childlist.length > 0 "  @click.native="changeRouter(item)">
              <template slot="title">
                <span> {{item.label}}</span>
              </template>
              <template >
              <el-menu-item-group v-if="item.childlist && item.childlist.length > 0 ">
                  <template  v-for="(child) in item.childlist" >
                    <el-menu-item :index="child.link"   
                    :key="child.name" @click="changeRouter(child)">{{child.label}}</el-menu-item>
                  </template>
                </el-menu-item-group>
              </template>
             
            </el-submenu>
            <el-menu-item :key="item.label" :index="item.link" v-else  @click="changeRouter(item)">{{item.label}}</el-menu-item>
          </template>
          
        </el-menu>
      </div>
      <el-menu :mode="'horizontal'" menu-trigger="click" class="FAQ_menu" :default-active="curLabel.label" >
        <el-submenu index="1" popper-class="FAQ_center">
          <template slot="title">{{curLabel.label}}</template>
          <el-menu-item :index="item.label" v-for="(item) in list" :key="item.label"  @click="gotoLink(item)">{{item.label}}</el-menu-item>
        </el-submenu>
      </el-menu>
      <div class="FAQ_content">
        <router-view></router-view>
        <p class="title_bottom">{{$t('FAQSTUFF.CONTENT5')}} <span class="blue" @click="goToConcatUS">{{$t('FAQSTUFF.CONTENT6')}} </span> {{$t('FAQSTUFF.CONTENT7')}} </p>

      </div>

    </div>
    
  </div>
</template>
<script>

import {faq_type} from '@/api/faq.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      curLabel: {},
      list:[]
    }
  },
  computed:{
   ...mapGetters(['curSite']),
  },
  created () {
    this.getFaqList()
  },
  mounted() {

  },
  methods: {
    setCurLabel () {
      let path = this.$route.path
     
      for(let i = 0; i < this.list.length; i++){
        let childlist = this.list[i].childlist 
         console.log(path, this.list[i].link)
        if(this.list[i].link == path){
          this.curLabel = this.list[i]
          break

        } else if(childlist && childlist.length > 0) {
          for(let j = 0; j < childlist.length; j++){
            console.log(childlist[j])
            if(childlist[j].link == path) {
              this.curLabel = childlist[j]
            }
          }

        }
      }
    },
    changeRouter(child) {
      this.$router.push({path: child.link})
    },
    getFaqList() {
      let params = {
        site_id: this.curSite.id
      }
      faq_type(params).then(res=>{
        let data = res.data
        let list = []
        for(let i = 0; i < data.length; i++){
          let obj = {
            label: data[i].label,
            link: '/FAQ/'+data[i].label,
            childlist: []
          }
          let second_type = data[i].faq_second_type_data
          if(second_type && second_type.length > 0){
            for(let j = 0; j < second_type.length; j++){
              let obj2 = {
                label: second_type[j].faq_second_type,
                link: '/FAQ/'+data[i].label+'/'+second_type[j].faq_second_type,
              }
              obj.childlist.push(obj2)

            }
          }

          list.push(obj)
        }
        let routeParams = this.$route.params
        if(!routeParams.faqtype) {
          if(list[0].childlist && list[0].childlist.length > 0){
            this.$router.push(list[0].childlist[0].link)
          } else {
            this.$router.push(list[0].link)
          }
        }

        this.list = list
        this.setCurLabel()
      })
    },
    gotoLink(item){
      this.curLabel = item
      this.$router.push(item.link)
    },
    goToConcatUS() {
      this.$router.push({path: '/warranty'})
    },
  }

}
</script>

<style lang="scss">
@import '@/styles/support/faq.scss';
</style>